<template>
  <div class="min-h-screen bg-white dark:bg-slate-900 transition-colors duration-300"
    :class="{ 'dark': appStore.isDarkMode }">
    <!-- 导航栏 -->
    <nav
      class="fixed top-0 left-0 right-0 z-50 bg-white/80 dark:bg-slate-900/80 backdrop-blur-md border-b border-slate-200 dark:border-slate-800 transition-all duration-300"
      :class="{ 'shadow-lg': isScrolled }">
      <!-- 滚动进度指示器 -->
      <div
        class="absolute bottom-0 left-0 h-0.5 bg-gradient-to-r from-cyan-500 to-blue-500 transition-all duration-300 ease-out"
        :style="{ width: scrollProgress + '%' }"></div>
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between items-center h-16">
          <div class="flex items-center">
            <div
              class="flex-shrink-0 flex items-center cursor-pointer hover:scale-105 transition-transform duration-200"
              @click="scrollToTop">
              <div
                class="w-8 h-8 bg-gradient-to-r from-cyan-500 to-blue-500 rounded-lg flex items-center justify-center animate-pulse">
                <i class="fab fa-vuejs text-white text-lg"></i>
              </div>
              <span class="ml-3 text-xl font-semibold text-slate-900 dark:text-white">Vue3 快速开发架构</span>
            </div>
          </div>
          <div class="flex items-center space-x-4">
            <!-- 导航菜单 -->
            <div class="hidden md:flex items-center space-x-6">
              <a href="#hero" @click="scrollToSection('hero')" :class="{
                'text-cyan-600 dark:text-cyan-400 font-medium': activeSection === 'hero',
                'text-slate-600 dark:text-slate-300': activeSection !== 'hero'
              }"
                class="relative hover:text-cyan-600 dark:hover:text-cyan-400 transition-all duration-300 cursor-pointer group">
                首页
                <span v-if="activeSection === 'hero'"
                  class="absolute -bottom-1 left-0 w-full h-0.5 bg-gradient-to-r from-cyan-500 to-blue-500 rounded-full animate-pulse"></span>
                <span v-else
                  class="absolute -bottom-1 left-0 w-0 h-0.5 bg-gradient-to-r from-cyan-500 to-blue-500 rounded-full group-hover:w-full transition-all duration-300"></span>
              </a>
              <a href="#tech-stack" @click="scrollToSection('tech-stack')" :class="{
                'text-cyan-600 dark:text-cyan-400 font-medium': activeSection === 'tech-stack',
                'text-slate-600 dark:text-slate-300': activeSection !== 'tech-stack'
              }"
                class="relative hover:text-cyan-600 dark:hover:text-cyan-400 transition-all duration-300 cursor-pointer group">
                技术栈
                <span v-if="activeSection === 'tech-stack'"
                  class="absolute -bottom-1 left-0 w-full h-0.5 bg-gradient-to-r from-cyan-500 to-blue-500 rounded-full animate-pulse"></span>
                <span v-else
                  class="absolute -bottom-1 left-0 w-0 h-0.5 bg-gradient-to-r from-cyan-500 to-blue-500 rounded-full group-hover:w-full transition-all duration-300"></span>
              </a>
              <a href="#features" @click="scrollToSection('features')" :class="{
                'text-cyan-600 dark:text-cyan-400 font-medium': activeSection === 'features',
                'text-slate-600 dark:text-slate-300': activeSection !== 'features'
              }"
                class="relative hover:text-cyan-600 dark:hover:text-cyan-400 transition-all duration-300 cursor-pointer group">
                特性
                <span v-if="activeSection === 'features'"
                  class="absolute -bottom-1 left-0 w-full h-0.5 bg-gradient-to-r from-cyan-500 to-blue-500 rounded-full animate-pulse"></span>
                <span v-else
                  class="absolute -bottom-1 left-0 w-0 h-0.5 bg-gradient-to-r from-cyan-500 to-blue-500 rounded-full group-hover:w-full transition-all duration-300"></span>
              </a>
              <a href="#quick-start" @click="scrollToSection('quick-start')" :class="{
                'text-cyan-600 dark:text-cyan-400 font-medium': activeSection === 'quick-start',
                'text-slate-600 dark:text-slate-300': activeSection !== 'quick-start'
              }"
                class="relative hover:text-cyan-600 dark:hover:text-cyan-400 transition-all duration-300 cursor-pointer group">
                快速开始
                <span v-if="activeSection === 'quick-start'"
                  class="absolute -bottom-1 left-0 w-full h-0.5 bg-gradient-to-r from-cyan-500 to-blue-500 rounded-full animate-pulse"></span>
                <span v-else
                  class="absolute -bottom-1 left-0 w-0 h-0.5 bg-gradient-to-r from-cyan-500 to-blue-500 rounded-full group-hover:w-full transition-all duration-300"></span>
              </a>
              <a href="#about-author" @click="scrollToSection('about-author')" :class="{
                'text-cyan-600 dark:text-cyan-400 font-medium': activeSection === 'about-author',
                'text-slate-600 dark:text-slate-300': activeSection !== 'about-author'
              }"
                class="relative hover:text-cyan-600 dark:hover:text-cyan-400 transition-all duration-300 cursor-pointer group">
                关于作者
                <span v-if="activeSection === 'about-author'"
                  class="absolute -bottom-1 left-0 w-full h-0.5 bg-gradient-to-r from-cyan-500 to-blue-500 rounded-full animate-pulse"></span>
                <span v-else
                  class="absolute -bottom-1 left-0 w-0 h-0.5 bg-gradient-to-r from-cyan-500 to-blue-500 rounded-full group-hover:w-full transition-all duration-300"></span>
              </a>
            </div>
            <button @click="appStore.toggleTheme()"
              class="p-2 text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-300 transition-all duration-200 hover:scale-110 cursor-pointer">
              <i :class="appStore.isDarkMode ? 'fas fa-sun' : 'fas fa-moon'" class="text-lg"></i>
            </button>
          </div>
        </div>
      </div>
    </nav>

    <!-- 主要内容 -->
    <main class="pt-16">
      <!-- Hero 区域 -->
      <section id="hero"
        class="relative overflow-hidden bg-gradient-to-br from-white via-cyan-50 to-blue-50 dark:from-slate-900 dark:via-slate-800 dark:to-slate-900 min-h-screen flex items-center">
        <!-- 背景装饰 -->
        <div class="absolute inset-0 overflow-hidden">
          <div
            class="absolute -top-40 -right-32 w-80 h-80 bg-gradient-to-br from-cyan-400/20 to-blue-500/20 rounded-full blur-3xl animate-pulse">
          </div>
          <div
            class="absolute -bottom-40 -left-32 w-80 h-80 bg-gradient-to-br from-purple-400/20 to-pink-500/20 rounded-full blur-3xl animate-pulse"
            style="animation-delay: 2s"></div>
        </div>

        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
          <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
            <!-- 左侧内容 -->
            <div class="text-center lg:text-left animate-fade-in-up">
              <div class="mb-6">
                <span
                  class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-cyan-100 dark:bg-cyan-900/30 text-cyan-800 dark:text-cyan-200 animate-bounce">
                  <i class="fas fa-rocket mr-2"></i>
                  Vue 3.5.13 + TypeScript 5.8
                </span>
              </div>
              <h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-slate-900 dark:text-white leading-tight">
                <span class="block animate-slide-in-left">快速构建</span>
                <span
                  class="block text-transparent bg-clip-text bg-gradient-to-r from-cyan-600 to-blue-600 animate-slide-in-right"
                  style="animation-delay: 0.2s">Vue3 项目</span>
              </h1>
              <p class="mt-6 text-lg sm:text-xl text-slate-600 dark:text-slate-300 max-w-2xl mx-auto lg:mx-0 animate-fade-in"
                style="animation-delay: 0.4s">
                由王麻子精心打造的 Vue 3 + TypeScript + Vite 现代化前端基础架构，专为快速开发和项目构建而设计，集成最佳实践，让您专注于业务逻辑的实现。
              </p>
              <div class="mt-8 flex flex-col sm:flex-row gap-4 justify-center lg:justify-start animate-fade-in"
                style="animation-delay: 0.6s">
                <button @click="scrollToSection('quick-start')"
                  class="group inline-flex items-center justify-center px-8 py-4 text-lg font-medium rounded-lg text-white bg-gradient-to-r from-cyan-600 to-blue-600 hover:from-cyan-700 hover:to-blue-700 transform hover:scale-105 transition-all duration-200 shadow-lg hover:shadow-xl cursor-pointer">
                  <i class="fas fa-play mr-2 group-hover:animate-pulse"></i>
                  快速开始
                </button>
                <button @click="scrollToSection('features')"
                  class="group inline-flex items-center justify-center px-8 py-4 text-lg font-medium rounded-lg text-cyan-700 dark:text-cyan-300 bg-white dark:bg-slate-800 border-2 border-cyan-600 hover:bg-cyan-50 dark:hover:bg-slate-700 transform hover:scale-105 transition-all duration-200 shadow-lg hover:shadow-xl cursor-pointer">
                  <i class="fas fa-info-circle mr-2 group-hover:animate-spin"></i>
                  了解更多
                </button>
              </div>

              <!-- 统计数据 -->
              <div class="mt-12 grid grid-cols-3 gap-6 animate-fade-in" style="animation-delay: 0.8s">
                <div class="text-center">
                  <div class="text-2xl font-bold text-cyan-600 dark:text-cyan-400">{{ stats.version }}</div>
                  <div class="text-sm text-slate-500 dark:text-slate-400">当前版本</div>
                </div>
                <div class="text-center">
                  <div class="text-2xl font-bold text-cyan-600 dark:text-cyan-400">{{ stats.features }}+</div>
                  <div class="text-sm text-slate-500 dark:text-slate-400">核心特性</div>
                </div>
                <div class="text-center">
                  <div class="text-2xl font-bold text-cyan-600 dark:text-cyan-400">{{ stats.components }}+</div>
                  <div class="text-sm text-slate-500 dark:text-slate-400">组件库</div>
                </div>
              </div>
            </div>

            <!-- 右侧可视化 -->
            <div class="relative animate-fade-in" style="animation-delay: 1s">
              <div class="relative mx-auto w-full max-w-lg">
                <!-- 主要图标 -->
                <div
                  class="relative z-10 bg-gradient-to-br from-cyan-500 to-blue-600 rounded-3xl p-8 shadow-2xl transform hover:scale-105 transition-transform duration-300">
                  <div class="text-center text-white">
                    <div class="text-8xl mb-6 animate-float">
                      <i class="fab fa-vuejs"></i>
                    </div>
                    <div class="text-3xl font-bold mb-2">Vue 3.5</div>
                    <div class="text-xl opacity-90">组合式 API</div>
                    <div class="mt-6 flex justify-center space-x-4">
                      <div class="w-3 h-3 bg-white/60 rounded-full animate-pulse"></div>
                      <div class="w-3 h-3 bg-white/60 rounded-full animate-pulse" style="animation-delay: 0.2s"></div>
                      <div class="w-3 h-3 bg-white/60 rounded-full animate-pulse" style="animation-delay: 0.4s"></div>
                    </div>
                  </div>
                </div>

                <!-- 浮动技术图标 -->
                <div
                  class="absolute -top-4 -left-4 w-16 h-16 bg-orange-500 rounded-xl flex items-center justify-center text-white text-2xl shadow-lg animate-bounce"
                  style="animation-delay: 1s">
                  <i class="fab fa-js-square"></i>
                </div>
                <div
                  class="absolute -top-4 -right-4 w-16 h-16 bg-blue-600 rounded-xl flex items-center justify-center text-white text-2xl shadow-lg animate-bounce"
                  style="animation-delay: 1.5s">
                  <i class="fab fa-css3-alt"></i>
                </div>
                <div
                  class="absolute -bottom-4 -left-4 w-16 h-16 bg-green-500 rounded-xl flex items-center justify-center text-white text-2xl shadow-lg animate-bounce"
                  style="animation-delay: 2s">
                  <i class="fas fa-bolt"></i>
                </div>
                <div
                  class="absolute -bottom-4 -right-4 w-16 h-16 bg-purple-600 rounded-xl flex items-center justify-center text-white text-2xl shadow-lg animate-bounce"
                  style="animation-delay: 2.5s">
                  <i class="fas fa-cog"></i>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 滚动提示 -->
        <div class="absolute bottom-8 left-1/2 transform -translate-x-1/2 animate-bounce">
          <button @click="scrollToSection('tech-stack')"
            class="text-slate-400 hover:text-cyan-600 transition-colors cursor-pointer">
            <i class="fas fa-chevron-down text-2xl"></i>
          </button>
        </div>
      </section>

      <!-- 技术栈展示 -->
      <section id="tech-stack" class="py-20 bg-white dark:bg-slate-900">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div class="text-center mb-16">
            <h2 class="text-base text-cyan-600 font-semibold tracking-wide uppercase mb-4">技术栈</h2>
            <h3 class="text-4xl font-extrabold text-slate-900 dark:text-white mb-6">
              现代化开发工具链
            </h3>
            <p class="text-xl text-slate-600 dark:text-slate-300 max-w-3xl mx-auto">
              基于最新的前端技术栈，为您提供最佳的开发体验和生产力提升
            </p>
          </div>

          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            <!-- Vue.js -->
            <div
              class="group relative bg-white dark:bg-slate-800 rounded-2xl p-6 shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2 cursor-pointer border border-slate-200 dark:border-slate-700">
              <div
                class="absolute inset-0 bg-gradient-to-br from-green-400/10 to-cyan-500/10 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300">
              </div>
              <div class="relative z-10">
                <div
                  class="w-16 h-16 bg-gradient-to-br from-green-400 to-cyan-500 rounded-xl flex items-center justify-center mb-4 group-hover:scale-110 transition-transform duration-300">
                  <i class="fab fa-vuejs text-white text-2xl"></i>
                </div>
                <h4 class="text-xl font-bold text-slate-900 dark:text-white mb-2">Vue 3.5</h4>
                <p class="text-slate-600 dark:text-slate-300 text-sm leading-relaxed">
                  渐进式 JavaScript 框架，支持组合式 API 和更好的 TypeScript 集成
                </p>
                <div class="mt-4 flex items-center text-cyan-600 dark:text-cyan-400 text-sm font-medium">
                  <i class="fas fa-arrow-right mr-2 group-hover:translate-x-1 transition-transform duration-300"></i>
                  了解更多
                </div>
              </div>
            </div>

            <!-- TypeScript -->
            <div
              class="group relative bg-white dark:bg-slate-800 rounded-2xl p-6 shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2 cursor-pointer border border-slate-200 dark:border-slate-700">
              <div
                class="absolute inset-0 bg-gradient-to-br from-blue-400/10 to-indigo-500/10 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300">
              </div>
              <div class="relative z-10">
                <div
                  class="w-16 h-16 bg-gradient-to-br from-blue-400 to-indigo-500 rounded-xl flex items-center justify-center mb-4 group-hover:scale-110 transition-transform duration-300">
                  <i class="fab fa-js-square text-white text-2xl"></i>
                </div>
                <h4 class="text-xl font-bold text-slate-900 dark:text-white mb-2">TypeScript 5.8</h4>
                <p class="text-slate-600 dark:text-slate-300 text-sm leading-relaxed">
                  强类型支持，提供更好的开发体验和代码质量保障
                </p>
                <div class="mt-4 flex items-center text-cyan-600 dark:text-cyan-400 text-sm font-medium">
                  <i class="fas fa-arrow-right mr-2 group-hover:translate-x-1 transition-transform duration-300"></i>
                  了解更多
                </div>
              </div>
            </div>

            <!-- Vite -->
            <div
              class="group relative bg-white dark:bg-slate-800 rounded-2xl p-6 shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2 cursor-pointer border border-slate-200 dark:border-slate-700">
              <div
                class="absolute inset-0 bg-gradient-to-br from-purple-400/10 to-pink-500/10 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300">
              </div>
              <div class="relative z-10">
                <div
                  class="w-16 h-16 bg-gradient-to-br from-purple-400 to-pink-500 rounded-xl flex items-center justify-center mb-4 group-hover:scale-110 transition-transform duration-300">
                  <i class="fas fa-bolt text-white text-2xl"></i>
                </div>
                <h4 class="text-xl font-bold text-slate-900 dark:text-white mb-2">Vite 6.2</h4>
                <p class="text-slate-600 dark:text-slate-300 text-sm leading-relaxed">
                  下一代前端构建工具，提供极速的开发服务器和构建性能
                </p>
                <div class="mt-4 flex items-center text-cyan-600 dark:text-cyan-400 text-sm font-medium">
                  <i class="fas fa-arrow-right mr-2 group-hover:translate-x-1 transition-transform duration-300"></i>
                  了解更多
                </div>
              </div>
            </div>

            <!-- Tailwind CSS -->
            <div
              class="group relative bg-white dark:bg-slate-800 rounded-2xl p-6 shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2 cursor-pointer border border-slate-200 dark:border-slate-700">
              <div
                class="absolute inset-0 bg-gradient-to-br from-cyan-400/10 to-teal-500/10 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300">
              </div>
              <div class="relative z-10">
                <div
                  class="w-16 h-16 bg-gradient-to-br from-cyan-400 to-teal-500 rounded-xl flex items-center justify-center mb-4 group-hover:scale-110 transition-transform duration-300">
                  <i class="fas fa-paint-brush text-white text-2xl"></i>
                </div>
                <h4 class="text-xl font-bold text-slate-900 dark:text-white mb-2">Tailwind CSS</h4>
                <p class="text-slate-600 dark:text-slate-300 text-sm leading-relaxed">
                  实用程序优先的 CSS 框架，快速构建现代化用户界面
                </p>
                <div class="mt-4 flex items-center text-cyan-600 dark:text-cyan-400 text-sm font-medium">
                  <i class="fas fa-arrow-right mr-2 group-hover:translate-x-1 transition-transform duration-300"></i>
                  了解更多
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- 核心特性 -->
      <section id="features" class="py-20 bg-slate-50 dark:bg-slate-900 relative overflow-hidden">
        <!-- 背景装饰 -->
        <div class="absolute inset-0">
          <div
            class="absolute top-0 left-1/4 w-72 h-72 bg-blue-400/20 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob">
          </div>
          <div
            class="absolute top-0 right-1/4 w-72 h-72 bg-purple-400/20 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000">
          </div>
          <div
            class="absolute -bottom-8 left-1/3 w-72 h-72 bg-pink-400/20 rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-4000">
          </div>
        </div>

        <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div class="text-center mb-16">
            <h2
              class="text-base text-cyan-600 dark:text-cyan-400 font-semibold tracking-wide uppercase mb-4 animate-fade-in-up">
              核心特性
            </h2>
            <h3
              class="text-4xl md:text-5xl font-bold text-slate-900 dark:text-white mb-6 animate-fade-in-up animation-delay-200">
              现代化开发体验
            </h3>
            <p
              class="max-w-3xl mx-auto text-xl text-slate-600 dark:text-slate-300 animate-fade-in-up animation-delay-400">
              基于最新技术栈构建的现代化 Vue.js 应用程序模板，提供完整的开发解决方案
            </p>
          </div>

          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            <!-- 状态管理 -->
            <div
              class="group relative bg-white dark:bg-slate-800 rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-500 transform hover:-translate-y-3 cursor-pointer border border-slate-200 dark:border-slate-700 animate-fade-in-up animation-delay-600">
              <div
                class="absolute inset-0 bg-gradient-to-br from-green-400/10 to-emerald-500/10 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300">
              </div>
              <div class="relative z-10">
                <div
                  class="w-16 h-16 bg-gradient-to-br from-green-400 to-emerald-500 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 group-hover:rotate-6 transition-all duration-300">
                  <i class="fas fa-database text-white text-2xl"></i>
                </div>
                <h4 class="text-xl font-bold text-slate-900 dark:text-white mb-3">状态管理</h4>
                <p class="text-slate-600 dark:text-slate-300 text-sm leading-relaxed mb-4">
                  Pinia 提供类型安全的状态管理解决方案
                </p>
                <div class="flex items-center text-green-600 dark:text-green-400 text-sm font-medium">
                  <i class="fas fa-arrow-right mr-2 group-hover:translate-x-1 transition-transform duration-300"></i>
                  了解更多
                </div>
              </div>
            </div>

            <!-- 路由系统 -->
            <div
              class="group relative bg-white dark:bg-slate-800 rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-500 transform hover:-translate-y-3 cursor-pointer border border-slate-200 dark:border-slate-700 animate-fade-in-up animation-delay-800">
              <div
                class="absolute inset-0 bg-gradient-to-br from-blue-400/10 to-indigo-500/10 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300">
              </div>
              <div class="relative z-10">
                <div
                  class="w-16 h-16 bg-gradient-to-br from-blue-400 to-indigo-500 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 group-hover:rotate-6 transition-all duration-300">
                  <i class="fas fa-route text-white text-2xl"></i>
                </div>
                <h4 class="text-xl font-bold text-slate-900 dark:text-white mb-3">路由系统</h4>
                <p class="text-slate-600 dark:text-slate-300 text-sm leading-relaxed mb-4">
                  Vue Router 4 支持嵌套路由和路由守卫
                </p>
                <div class="flex items-center text-blue-600 dark:text-blue-400 text-sm font-medium">
                  <i class="fas fa-arrow-right mr-2 group-hover:translate-x-1 transition-transform duration-300"></i>
                  了解更多
                </div>
              </div>
            </div>

            <!-- 响应式设计 -->
            <div
              class="group relative bg-white dark:bg-slate-800 rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-500 transform hover:-translate-y-3 cursor-pointer border border-slate-200 dark:border-slate-700 animate-fade-in-up animation-delay-1000">
              <div
                class="absolute inset-0 bg-gradient-to-br from-pink-400/10 to-rose-500/10 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300">
              </div>
              <div class="relative z-10">
                <div
                  class="w-16 h-16 bg-gradient-to-br from-pink-400 to-rose-500 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 group-hover:rotate-6 transition-all duration-300">
                  <i class="fas fa-mobile-alt text-white text-2xl"></i>
                </div>
                <h4 class="text-xl font-bold text-slate-900 dark:text-white mb-3">响应式设计</h4>
                <p class="text-slate-600 dark:text-slate-300 text-sm leading-relaxed mb-4">
                  完全响应式界面，适配各种设备尺寸
                </p>
                <div class="flex items-center text-pink-600 dark:text-pink-400 text-sm font-medium">
                  <i class="fas fa-arrow-right mr-2 group-hover:translate-x-1 transition-transform duration-300"></i>
                  了解更多
                </div>
              </div>
            </div>

            <!-- 主题系统 -->
            <div
              class="group relative bg-white dark:bg-slate-800 rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-500 transform hover:-translate-y-3 cursor-pointer border border-slate-200 dark:border-slate-700 animate-fade-in-up animation-delay-1200">
              <div
                class="absolute inset-0 bg-gradient-to-br from-yellow-400/10 to-orange-500/10 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300">
              </div>
              <div class="relative z-10">
                <div
                  class="w-16 h-16 bg-gradient-to-br from-yellow-400 to-orange-500 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 group-hover:rotate-6 transition-all duration-300">
                  <i class="fas fa-moon text-white text-2xl"></i>
                </div>
                <h4 class="text-xl font-bold text-slate-900 dark:text-white mb-3">主题系统</h4>
                <p class="text-slate-600 dark:text-slate-300 text-sm leading-relaxed mb-4">
                  内置深色/浅色主题切换功能
                </p>
                <div class="flex items-center text-yellow-600 dark:text-yellow-400 text-sm font-medium">
                  <i class="fas fa-arrow-right mr-2 group-hover:translate-x-1 transition-transform duration-300"></i>
                  了解更多
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- 快速开始 -->
      <section id="quick-start" class="py-20 bg-slate-900 dark:bg-slate-950 relative overflow-hidden">
        <!-- 背景装饰 -->
        <div class="absolute inset-0">
          <div
            class="absolute top-1/4 right-0 w-96 h-96 bg-gradient-to-l from-cyan-400/10 to-blue-500/10 rounded-full filter blur-3xl">
          </div>
          <div
            class="absolute bottom-0 left-0 w-96 h-96 bg-gradient-to-r from-purple-400/10 to-pink-500/10 rounded-full filter blur-3xl">
          </div>
        </div>

        <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div class="text-center mb-16">
            <h2 class="text-base text-cyan-400 font-semibold tracking-wide uppercase mb-4 animate-fade-in-up">快速开始</h2>
            <h3 class="text-4xl md:text-5xl font-bold text-white mb-6 animate-fade-in-up animation-delay-200">
              三步即可开始开发
            </h3>
            <p class="max-w-3xl mx-auto text-xl text-slate-300 animate-fade-in-up animation-delay-400">
              简单几个命令，立即启动您的现代化 Vue3 项目，体验极速的开发环境
            </p>
          </div>

          <div class="lg:grid lg:grid-cols-2 lg:gap-16 lg:items-center">
            <!-- 左侧说明 -->
            <div class="animate-fade-in-up animation-delay-600">
              <div class="space-y-8">
                <div class="flex items-start space-x-4">
                  <div
                    class="flex-shrink-0 w-8 h-8 bg-cyan-500 rounded-full flex items-center justify-center text-white font-bold text-sm">
                    1</div>
                  <div>
                    <h4 class="text-lg font-semibold text-white mb-2">克隆项目</h4>
                    <p class="text-slate-300">从 GitHub 仓库克隆项目模板到本地</p>
                  </div>
                </div>
                <div class="flex items-start space-x-4">
                  <div
                    class="flex-shrink-0 w-8 h-8 bg-cyan-500 rounded-full flex items-center justify-center text-white font-bold text-sm">
                    2</div>
                  <div>
                    <h4 class="text-lg font-semibold text-white mb-2">安装依赖</h4>
                    <p class="text-slate-300">使用 npm 安装项目所需的所有依赖包</p>
                  </div>
                </div>
                <div class="flex items-start space-x-4">
                  <div
                    class="flex-shrink-0 w-8 h-8 bg-cyan-500 rounded-full flex items-center justify-center text-white font-bold text-sm">
                    3</div>
                  <div>
                    <h4 class="text-lg font-semibold text-white mb-2">启动开发</h4>
                    <p class="text-slate-300">启动开发服务器，开始您的编码之旅</p>
                  </div>
                </div>
              </div>

              <div class="mt-8 flex flex-col sm:flex-row gap-4">
                <a href="https://gitee.com/ssdlm_aifast/vue3-quickstart" target="_blank"
                  class="group inline-flex items-center justify-center px-8 py-4 text-lg font-semibold text-slate-900 bg-white rounded-xl shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300">
                  <i class="fab fa-git-alt mr-3 group-hover:animate-pulse"></i>
                  查看源码
                </a>
                <button
                  class="group inline-flex items-center justify-center px-8 py-4 text-lg font-semibold text-white bg-slate-700 hover:bg-slate-600 rounded-xl shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300">
                  <i class="fas fa-book mr-3 group-hover:animate-bounce"></i>
                  查看文档
                </button>
              </div>
            </div>

            <!-- 右侧终端 -->
            <div class="mt-12 lg:mt-0 animate-fade-in-up animation-delay-800">
              <div class="relative">
                <div class="bg-slate-800 rounded-2xl shadow-2xl overflow-hidden border border-slate-700">
                  <div class="bg-slate-700 px-6 py-4 border-b border-slate-600">
                    <div class="flex items-center justify-between">
                      <div class="flex space-x-2">
                        <div class="w-3 h-3 bg-red-500 rounded-full"></div>
                        <div class="w-3 h-3 bg-yellow-500 rounded-full"></div>
                        <div class="w-3 h-3 bg-green-500 rounded-full"></div>
                      </div>
                      <div class="text-slate-300 text-sm font-medium">Terminal</div>
                      <div class="w-16"></div>
                    </div>
                  </div>
                  <div class="p-6">
                    <div class="space-y-4 font-mono text-sm">
                      <div class="flex items-center group">
                        <span class="text-green-400 select-none mr-3">$</span>
                        <span class="text-slate-300">git clone https://gitee.com/ssdlm_aifast/vue3-quickstart.git</span>
                        <span
                          class="ml-2 text-green-400 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                          <i class="fas fa-copy cursor-pointer hover:text-green-300"></i>
                        </span>
                      </div>
                      <div class="text-slate-400 ml-6">Cloning into 'vue3-quickstart'...</div>

                      <div class="flex items-center group mt-4">
                        <span class="text-green-400 select-none mr-3">$</span>
                        <span class="text-slate-300">cd vue3-quickstart</span>
                        <span
                          class="ml-2 text-green-400 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                          <i class="fas fa-copy cursor-pointer hover:text-green-300"></i>
                        </span>
                      </div>

                      <div class="flex items-center group">
                        <span class="text-green-400 select-none mr-3">$</span>
                        <span class="text-slate-300">npm install</span>
                        <span
                          class="ml-2 text-green-400 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                          <i class="fas fa-copy cursor-pointer hover:text-green-300"></i>
                        </span>
                      </div>
                      <div class="text-slate-400 ml-6">Installing dependencies...</div>

                      <div class="flex items-center group mt-4">
                        <span class="text-green-400 select-none mr-3">$</span>
                        <span class="text-slate-300">npm run dev</span>
                        <span
                          class="ml-2 text-green-400 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                          <i class="fas fa-copy cursor-pointer hover:text-green-300"></i>
                        </span>
                      </div>
                      <div class="text-cyan-400 ml-6 flex items-center">
                        <i class="fas fa-check-circle mr-2"></i>
                        Local: http://localhost:5173/
                      </div>
                      <div class="text-cyan-400 ml-6 flex items-center">
                        <i class="fas fa-bolt mr-2"></i>
                        ready in 89ms ⚡
                      </div>
                    </div>
                  </div>
                </div>

                <!-- 浮动装饰元素 -->
                <div class="absolute -top-4 -right-4 w-8 h-8 bg-cyan-500 rounded-full animate-ping"></div>
                <div class="absolute -bottom-4 -left-4 w-6 h-6 bg-purple-500 rounded-full animate-pulse"></div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- 统计信息 -->
      <section id="stats"
        class="py-20 bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-800 dark:to-slate-900 relative overflow-hidden">
        <!-- 背景装饰 -->
        <div class="absolute inset-0">
          <div class="absolute top-1/2 left-1/4 w-64 h-64 bg-cyan-400/10 rounded-full filter blur-3xl animate-pulse">
          </div>
          <div
            class="absolute bottom-1/4 right-1/4 w-64 h-64 bg-purple-400/10 rounded-full filter blur-3xl animate-pulse animation-delay-2000">
          </div>
        </div>

        <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div class="text-center mb-16">
            <h2 class="text-4xl md:text-5xl font-bold text-slate-900 dark:text-white mb-6 animate-fade-in-up">
              项目统计
            </h2>
            <p
              class="max-w-3xl mx-auto text-xl text-slate-600 dark:text-slate-300 animate-fade-in-up animation-delay-200">
              实时展示项目的关键信息和运行状态
            </p>
          </div>

          <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            <!-- 项目版本 -->
            <div
              class="group relative bg-white dark:bg-slate-800 rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-500 transform hover:-translate-y-2 cursor-pointer border border-slate-200 dark:border-slate-700 animate-fade-in-up animation-delay-400">
              <div
                class="absolute inset-0 bg-gradient-to-br from-cyan-400/10 to-blue-500/10 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300">
              </div>
              <div class="relative z-10 text-center">
                <div
                  class="w-16 h-16 bg-gradient-to-br from-cyan-400 to-blue-500 rounded-xl flex items-center justify-center mx-auto mb-6 group-hover:scale-110 group-hover:rotate-12 transition-all duration-300">
                  <i class="fas fa-code-branch text-white text-2xl"></i>
                </div>
                <h3 class="text-lg font-semibold text-slate-600 dark:text-slate-400 mb-2">项目版本</h3>
                <div class="text-4xl font-bold text-slate-900 dark:text-white mb-2">v1.0.0</div>
                <p class="text-sm text-slate-500 dark:text-slate-400">当前发布版本</p>
              </div>
            </div>

            <!-- 当前用户 -->
            <div
              class="group relative bg-white dark:bg-slate-800 rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-500 transform hover:-translate-y-2 cursor-pointer border border-slate-200 dark:border-slate-700 animate-fade-in-up animation-delay-600">
              <div
                class="absolute inset-0 bg-gradient-to-br from-purple-400/10 to-pink-500/10 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300">
              </div>
              <div class="relative z-10 text-center">
                <div
                  class="w-16 h-16 bg-gradient-to-br from-purple-400 to-pink-500 rounded-xl flex items-center justify-center mx-auto mb-6 group-hover:scale-110 group-hover:rotate-12 transition-all duration-300">
                  <i class="fas fa-user text-white text-2xl"></i>
                </div>
                <h3 class="text-lg font-semibold text-slate-600 dark:text-slate-400 mb-2">当前用户</h3>
                <div class="text-4xl font-bold text-slate-900 dark:text-white mb-2">{{ userStore.userName }}</div>
                <p class="text-sm text-slate-500 dark:text-slate-400">登录状态</p>
              </div>
            </div>

            <!-- 主题模式 -->
            <div
              class="group relative bg-white dark:bg-slate-800 rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-500 transform hover:-translate-y-2 cursor-pointer border border-slate-200 dark:border-slate-700 animate-fade-in-up animation-delay-800">
              <div
                class="absolute inset-0 bg-gradient-to-br from-yellow-400/10 to-orange-500/10 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300">
              </div>
              <div class="relative z-10 text-center">
                <div
                  class="w-16 h-16 bg-gradient-to-br from-yellow-400 to-orange-500 rounded-xl flex items-center justify-center mx-auto mb-6 group-hover:scale-110 group-hover:rotate-12 transition-all duration-300">
                  <i class="fas fa-palette text-white text-2xl"></i>
                </div>
                <h3 class="text-lg font-semibold text-slate-600 dark:text-slate-400 mb-2">主题模式</h3>
                <div class="text-4xl font-bold text-slate-900 dark:text-white mb-2">{{ appStore.isDarkMode ? '深色' : '浅色'
                }}</div>
                <p class="text-sm text-slate-500 dark:text-slate-400">界面主题</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- 关于作者 -->
      <section id="about-author" class="py-20 bg-white dark:bg-slate-900 relative overflow-hidden">
        <!-- 背景装饰 -->
        <div class="absolute inset-0">
          <div
            class="absolute top-1/4 right-1/4 w-72 h-72 bg-gradient-to-br from-cyan-400/10 to-blue-500/10 rounded-full filter blur-3xl animate-pulse">
          </div>
          <div
            class="absolute bottom-1/4 left-1/4 w-72 h-72 bg-gradient-to-br from-purple-400/10 to-pink-500/10 rounded-full filter blur-3xl animate-pulse animation-delay-2000">
          </div>
          <!-- 新增浮动粒子效果 -->
          <div class="absolute top-10 left-10 w-4 h-4 bg-cyan-400/20 rounded-full animate-bounce animation-delay-1000">
          </div>
          <div
            class="absolute top-32 right-20 w-3 h-3 bg-purple-400/20 rounded-full animate-bounce animation-delay-1500">
          </div>
          <div
            class="absolute bottom-20 left-32 w-5 h-5 bg-blue-400/20 rounded-full animate-bounce animation-delay-2500">
          </div>
          <div
            class="absolute bottom-40 right-40 w-2 h-2 bg-pink-400/20 rounded-full animate-bounce animation-delay-3000">
          </div>
        </div>

        <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div class="text-center mb-16">
            <h2
              class="text-base text-cyan-600 dark:text-cyan-400 font-semibold tracking-wide uppercase mb-4 animate-fade-in-up">
              关于作者
            </h2>
            <h3
              class="text-4xl md:text-5xl font-bold text-slate-900 dark:text-white mb-6 animate-fade-in-up animation-delay-200">
              项目创作者
            </h3>
            <p
              class="max-w-3xl mx-auto text-xl text-slate-600 dark:text-slate-300 animate-fade-in-up animation-delay-400">
              了解项目背后的故事和创作理念
            </p>
          </div>

          <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
            <!-- 左侧作者信息 -->
            <div class="animate-fade-in-up animation-delay-600">
              <div
                class="group bg-gradient-to-br from-cyan-50 to-blue-50 dark:from-slate-800 dark:to-slate-700 rounded-3xl p-8 shadow-lg hover:shadow-2xl transition-all duration-500 transform hover:-translate-y-2 hover:scale-105">
                <!-- 悬停时的光晕效果 -->
                <div
                  class="absolute inset-0 bg-gradient-to-br from-cyan-400/20 to-blue-500/20 rounded-3xl opacity-0 group-hover:opacity-100 transition-opacity duration-500 blur-xl">
                </div>
                <div class="relative z-10">
                  <div class="flex items-center mb-6">
                    <div
                      class="relative w-20 h-20 bg-gradient-to-br from-cyan-500 to-blue-600 rounded-2xl flex items-center justify-center mr-6 shadow-lg group-hover:shadow-2xl group-hover:shadow-cyan-500/25 transition-all duration-500 group-hover:rotate-6 group-hover:scale-110">
                      <!-- 头像光环效果 -->
                      <div
                        class="absolute inset-0 bg-gradient-to-br from-cyan-400 to-blue-500 rounded-2xl opacity-0 group-hover:opacity-20 transition-opacity duration-500 animate-pulse">
                      </div>
                      <i
                        class="fas fa-user-tie text-white text-3xl group-hover:scale-110 transition-transform duration-300"></i>
                    </div>
                    <div>
                      <h4
                        class="text-2xl font-bold text-slate-900 dark:text-white mb-2 group-hover:text-transparent group-hover:bg-clip-text group-hover:bg-gradient-to-r group-hover:from-cyan-500 group-hover:to-blue-600 transition-all duration-300">
                        王麻子</h4>
                      <p
                        class="text-cyan-600 dark:text-cyan-400 font-medium group-hover:text-blue-500 transition-colors duration-300">
                        全栈架构师 & 开源贡献者</p>
                    </div>
                  </div>
                </div>
                <div class="space-y-4 text-slate-600 dark:text-slate-300">
                  <div class="flex items-start space-x-3">
                    <i class="fas fa-quote-left text-cyan-500 mt-1 flex-shrink-0"></i>
                    <p class="leading-relaxed">
                      专注于现代化前端技术栈的研究与实践，致力于为开发者提供高效、优雅的开发解决方案。
                    </p>
                  </div>

                  <div class="flex items-start space-x-3">
                    <i class="fas fa-lightbulb text-yellow-500 mt-1 flex-shrink-0"></i>
                    <p class="leading-relaxed">
                      拥有多年前端开发经验，深度理解 Vue.js 生态系统，擅长构建可维护、可扩展的企业级应用。
                    </p>
                  </div>
                </div>

                <!-- 技能标签 -->
                <div class="mt-6 flex flex-wrap gap-2">
                  <span
                    class="group/tag px-3 py-1 bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-200 rounded-full text-sm font-medium cursor-pointer transform hover:scale-110 hover:-translate-y-1 transition-all duration-300 hover:shadow-lg hover:shadow-green-500/25 hover:bg-green-200 dark:hover:bg-green-800/50">
                    <i class="fab fa-vuejs mr-1 group-hover/tag:animate-spin"></i>
                    Vue.js 专家
                  </span>
                  <span
                    class="group/tag px-3 py-1 bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-200 rounded-full text-sm font-medium cursor-pointer transform hover:scale-110 hover:-translate-y-1 transition-all duration-300 hover:shadow-lg hover:shadow-blue-500/25 hover:bg-blue-200 dark:hover:bg-blue-800/50 animation-delay-100">
                    <i class="fab fa-js-square mr-1 group-hover/tag:animate-pulse"></i>
                    TypeScript
                  </span>
                  <span
                    class="group/tag px-3 py-1 bg-purple-100 dark:bg-purple-900/30 text-purple-800 dark:text-purple-200 rounded-full text-sm font-medium cursor-pointer transform hover:scale-110 hover:-translate-y-1 transition-all duration-300 hover:shadow-lg hover:shadow-purple-500/25 hover:bg-purple-200 dark:hover:bg-purple-800/50 animation-delay-200">
                    <i class="fas fa-drafting-compass mr-1 group-hover/tag:animate-bounce"></i>
                    架构设计
                  </span>
                  <span
                    class="group/tag px-3 py-1 bg-cyan-100 dark:bg-cyan-900/30 text-cyan-800 dark:text-cyan-200 rounded-full text-sm font-medium cursor-pointer transform hover:scale-110 hover:-translate-y-1 transition-all duration-300 hover:shadow-lg hover:shadow-cyan-500/25 hover:bg-cyan-200 dark:hover:bg-cyan-800/50 animation-delay-300">
                    <i class="fab fa-github mr-1 group-hover/tag:animate-ping"></i>
                    开源贡献
                  </span>
                </div>
              </div>
            </div>

            <!-- 右侧项目理念 -->
            <div class="animate-fade-in-up animation-delay-800">
              <div class="space-y-8">
                <div
                  class="group/card bg-white dark:bg-slate-800 rounded-2xl p-6 shadow-lg hover:shadow-xl transition-all duration-500 border border-slate-200 dark:border-slate-700 transform hover:-translate-y-3 hover:scale-105 cursor-pointer">
                  <!-- 卡片悬停光晕 -->
                  <div
                    class="absolute inset-0 bg-gradient-to-br from-green-400/10 to-emerald-500/10 rounded-2xl opacity-0 group-hover/card:opacity-100 transition-opacity duration-500">
                  </div>
                  <div class="relative z-10">
                    <div class="flex items-center mb-4">
                      <div
                        class="w-12 h-12 bg-gradient-to-br from-green-400 to-emerald-500 rounded-xl flex items-center justify-center mr-4 group-hover/card:scale-110 group-hover/card:rotate-12 transition-all duration-300 group-hover/card:shadow-lg group-hover/card:shadow-green-500/25">
                        <i class="fas fa-rocket text-white text-xl group-hover/card:animate-bounce"></i>
                      </div>
                      <h5
                        class="text-xl font-bold text-slate-900 dark:text-white group-hover/card:text-transparent group-hover/card:bg-clip-text group-hover/card:bg-gradient-to-r group-hover/card:from-green-400 group-hover/card:to-emerald-500 transition-all duration-300">
                        项目愿景</h5>
                    </div>
                    <p
                      class="text-slate-600 dark:text-slate-300 leading-relaxed group-hover/card:text-slate-700 dark:group-hover/card:text-slate-200 transition-colors duration-300">
                      打造一个真正实用的 Vue3 基础架构，让开发者能够快速启动项目，专注于业务逻辑而非基础设施搭建。
                    </p>
                  </div>
                </div>

                <div
                  class="group/card bg-white dark:bg-slate-800 rounded-2xl p-6 shadow-lg hover:shadow-xl transition-all duration-500 border border-slate-200 dark:border-slate-700 transform hover:-translate-y-3 hover:scale-105 cursor-pointer animation-delay-200">
                  <!-- 卡片悬停光晕 -->
                  <div
                    class="absolute inset-0 bg-gradient-to-br from-blue-400/10 to-indigo-500/10 rounded-2xl opacity-0 group-hover/card:opacity-100 transition-opacity duration-500">
                  </div>
                  <div class="relative z-10">
                    <div class="flex items-center mb-4">
                      <div
                        class="w-12 h-12 bg-gradient-to-br from-blue-400 to-indigo-500 rounded-xl flex items-center justify-center mr-4 group-hover/card:scale-110 group-hover/card:rotate-12 transition-all duration-300 group-hover/card:shadow-lg group-hover/card:shadow-blue-500/25">
                        <i class="fas fa-cogs text-white text-xl group-hover/card:animate-spin"></i>
                      </div>
                      <h5
                        class="text-xl font-bold text-slate-900 dark:text-white group-hover/card:text-transparent group-hover/card:bg-clip-text group-hover/card:bg-gradient-to-r group-hover/card:from-blue-400 group-hover/card:to-indigo-500 transition-all duration-300">
                        设计理念</h5>
                    </div>
                    <p
                      class="text-slate-600 dark:text-slate-300 leading-relaxed group-hover/card:text-slate-700 dark:group-hover/card:text-slate-200 transition-colors duration-300">
                      遵循最佳实践，集成现代化工具链，提供开箱即用的开发体验，同时保持代码的简洁性和可维护性。
                    </p>
                  </div>
                </div>

                <div
                  class="group/card bg-white dark:bg-slate-800 rounded-2xl p-6 shadow-lg hover:shadow-xl transition-all duration-500 border border-slate-200 dark:border-slate-700 transform hover:-translate-y-3 hover:scale-105 cursor-pointer animation-delay-400">
                  <!-- 卡片悬停光晕 -->
                  <div
                    class="absolute inset-0 bg-gradient-to-br from-purple-400/10 to-pink-500/10 rounded-2xl opacity-0 group-hover/card:opacity-100 transition-opacity duration-500">
                  </div>
                  <div class="relative z-10">
                    <div class="flex items-center mb-4">
                      <div
                        class="w-12 h-12 bg-gradient-to-br from-purple-400 to-pink-500 rounded-xl flex items-center justify-center mr-4 group-hover/card:scale-110 group-hover/card:rotate-12 transition-all duration-300 group-hover/card:shadow-lg group-hover/card:shadow-purple-500/25">
                        <i class="fas fa-heart text-white text-xl group-hover/card:animate-pulse"></i>
                      </div>
                      <h5
                        class="text-xl font-bold text-slate-900 dark:text-white group-hover/card:text-transparent group-hover/card:bg-clip-text group-hover/card:bg-gradient-to-r group-hover/card:from-purple-400 group-hover/card:to-pink-500 transition-all duration-300">
                        开源精神</h5>
                    </div>
                    <p
                      class="text-slate-600 dark:text-slate-300 leading-relaxed group-hover/card:text-slate-700 dark:group-hover/card:text-slate-200 transition-colors duration-300">
                      相信开源的力量，希望通过分享和协作，与社区一起推动前端技术的发展和进步。
                    </p>
                  </div>
                </div>
              </div>
            </div>

            
          </div>

          <!-- 联系方式 -->
            <div class="mt-16 text-center animate-fade-in-up animation-delay-1000">
              <div
                class="group/contact relative bg-gradient-to-r from-cyan-50 to-blue-50 dark:from-slate-800 dark:to-slate-700 rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-500 transform hover:-translate-y-2">
                <!-- 联系方式背景动画 -->
                <div
                  class="absolute inset-0 bg-gradient-to-r from-cyan-400/10 to-blue-500/10 rounded-2xl opacity-0 group-hover/contact:opacity-100 transition-opacity duration-500">
                </div>
                <!-- 装饰性粒子 -->
                <div
                  class="absolute top-4 right-4 w-3 h-3 bg-cyan-400/30 rounded-full animate-ping animation-delay-500">
                </div>
                <div
                  class="absolute bottom-4 left-4 w-2 h-2 bg-blue-400/30 rounded-full animate-ping animation-delay-1000">
                </div>

                <div class="relative z-10">
                  <h4
                    class="text-2xl font-bold text-slate-900 dark:text-white mb-4 group-hover/contact:text-transparent group-hover/contact:bg-clip-text group-hover/contact:bg-gradient-to-r group-hover/contact:from-cyan-500 group-hover/contact:to-blue-600 transition-all duration-300">
                    与我联系</h4>
                  <p
                    class="text-slate-600 dark:text-slate-300 mb-6 group-hover/contact:text-slate-700 dark:group-hover/contact:text-slate-200 transition-colors duration-300">
                    如果您有任何问题或建议，欢迎通过以下方式联系我</p>
                  <div class="flex justify-center space-x-6">
                    <a href="https://gitee.com/ssdlm_aifast" target="_blank"
                      class="group/link relative flex items-center space-x-2 px-6 py-3 bg-orange-500 hover:bg-orange-600 text-white rounded-xl transition-all duration-300 transform hover:-translate-y-2 hover:scale-110 shadow-lg hover:shadow-2xl hover:shadow-orange-500/25 overflow-hidden">
                      <!-- 按钮光效 -->
                      <div
                        class="absolute inset-0 bg-gradient-to-r from-orange-400 to-red-500 opacity-0 group-hover/link:opacity-20 transition-opacity duration-300">
                      </div>
                      <div class="relative z-10 flex items-center space-x-2">
                        <i class="fab fa-git-alt group-hover/link:animate-spin text-lg"></i>
                        <span class="font-medium">Gitee</span>
                      </div>
                      <!-- 涟漪效果 -->
                      <div
                        class="absolute inset-0 rounded-xl bg-white/20 scale-0 group-hover/link:scale-100 transition-transform duration-500 opacity-0 group-hover/link:opacity-100">
                      </div>
                    </a>
                    <a href="mailto:1585079934@qq.com"
                      class="group/link relative flex items-center space-x-2 px-6 py-3 bg-blue-500 hover:bg-blue-600 text-white rounded-xl transition-all duration-300 transform hover:-translate-y-2 hover:scale-110 shadow-lg hover:shadow-2xl hover:shadow-blue-500/25 overflow-hidden animation-delay-200">
                      <!-- 按钮光效 -->
                      <div
                        class="absolute inset-0 bg-gradient-to-r from-blue-400 to-indigo-500 opacity-0 group-hover/link:opacity-20 transition-opacity duration-300">
                      </div>
                      <div class="relative z-10 flex items-center space-x-2">
                        <i class="fas fa-envelope group-hover/link:animate-bounce text-lg"></i>
                        <span class="font-medium">邮箱</span>
                      </div>
                      <!-- 涟漪效果 -->
                      <div
                        class="absolute inset-0 rounded-xl bg-white/20 scale-0 group-hover/link:scale-100 transition-transform duration-500 opacity-0 group-hover/link:opacity-100">
                      </div>
                    </a>
                  </div>
                </div>
              </div>
            </div>
        </div>




      </section>
    </main>
  </div>


  <!-- 页脚 -->
  <footer class="bg-slate-900 dark:bg-slate-950 relative overflow-hidden">
    <!-- 背景装饰 -->
    <div class="absolute inset-0">
      <div
        class="absolute top-0 left-1/4 w-96 h-96 bg-gradient-to-br from-cyan-400/5 to-blue-500/5 rounded-full filter blur-3xl">
      </div>
      <div
        class="absolute bottom-0 right-1/4 w-96 h-96 bg-gradient-to-br from-purple-400/5 to-pink-500/5 rounded-full filter blur-3xl">
      </div>
    </div>

    <div class="relative max-w-7xl mx-auto py-16 px-4 sm:px-6 lg:py-20 lg:px-8">
      <div class="grid grid-cols-1 lg:grid-cols-4 gap-12">
        <!-- 品牌信息 -->
        <div class="lg:col-span-2 space-y-8">
          <div class="flex items-center group">
            <div
              class="w-12 h-12 bg-gradient-to-br from-cyan-400 to-blue-500 rounded-xl flex items-center justify-center mr-4 group-hover:scale-110 transition-transform duration-300">
              <i class="fas fa-cube text-white text-xl"></i>
            </div>
            <span class="text-2xl font-bold text-white">Vue3 快速开发架构</span>
          </div>
          <p class="text-slate-300 text-lg leading-relaxed max-w-md">
            由王麻子开发的现代化 Vue.js 快速开发基础架构，集成最新前端技术栈和最佳实践，专为快速构建高质量 Web 应用而设计。
          </p>

          <!-- 社交媒体链接 -->
          <div class="flex space-x-6">
            <a href="https://gitee.com/ssdlm_aifast/vue3-quickstart" target="_blank"
              class="group w-12 h-12 bg-slate-800 hover:bg-slate-700 rounded-xl flex items-center justify-center transition-all duration-300 transform hover:-translate-y-1">
              <i class="fab fa-git-alt text-slate-400 group-hover:text-orange-400 text-xl"></i>
            </a>
            <a href="https://github.com" target="_blank"
              class="group w-12 h-12 bg-slate-800 hover:bg-slate-700 rounded-xl flex items-center justify-center transition-all duration-300 transform hover:-translate-y-1">
              <i class="fab fa-github text-slate-400 group-hover:text-white text-xl"></i>
            </a>
            <a href="#"
              class="group w-12 h-12 bg-slate-800 hover:bg-slate-700 rounded-xl flex items-center justify-center transition-all duration-300 transform hover:-translate-y-1">
              <i class="fab fa-twitter text-slate-400 group-hover:text-blue-400 text-xl"></i>
            </a>
            <a href="#"
              class="group w-12 h-12 bg-slate-800 hover:bg-slate-700 rounded-xl flex items-center justify-center transition-all duration-300 transform hover:-translate-y-1">
              <i class="fab fa-discord text-slate-400 group-hover:text-purple-400 text-xl"></i>
            </a>
          </div>
        </div>

        <!-- 技术栈 -->
        <div>
          <h3 class="text-lg font-semibold text-white mb-6 flex items-center">
            <i class="fas fa-code mr-3 text-cyan-400"></i>
            技术栈
          </h3>
          <ul class="space-y-4">
            <li>
              <a href="#"
                class="group flex items-center text-slate-400 hover:text-white transition-colors duration-300">
                <i class="fab fa-vuejs mr-3 text-green-400 group-hover:scale-110 transition-transform duration-300"></i>
                Vue.js 3.5
              </a>
            </li>
            <li>
              <a href="#"
                class="group flex items-center text-slate-400 hover:text-white transition-colors duration-300">
                <i
                  class="fab fa-js-square mr-3 text-blue-400 group-hover:scale-110 transition-transform duration-300"></i>
                TypeScript 5.8
              </a>
            </li>
            <li>
              <a href="#"
                class="group flex items-center text-slate-400 hover:text-white transition-colors duration-300">
                <i class="fas fa-bolt mr-3 text-purple-400 group-hover:scale-110 transition-transform duration-300"></i>
                Vite 6.2
              </a>
            </li>
            <li>
              <a href="#"
                class="group flex items-center text-slate-400 hover:text-white transition-colors duration-300">
                <i
                  class="fas fa-paint-brush mr-3 text-cyan-400 group-hover:scale-110 transition-transform duration-300"></i>
                Tailwind CSS
              </a>
            </li>
          </ul>
        </div>

        <!-- 核心特性 -->
        <div>
          <h3 class="text-lg font-semibold text-white mb-6 flex items-center">
            <i class="fas fa-star mr-3 text-yellow-400"></i>
            核心特性
          </h3>
          <ul class="space-y-4">
            <li>
              <a href="#features"
                class="group flex items-center text-slate-400 hover:text-white transition-colors duration-300">
                <i
                  class="fas fa-database mr-3 text-green-400 group-hover:scale-110 transition-transform duration-300"></i>
                状态管理
              </a>
            </li>
            <li>
              <a href="#features"
                class="group flex items-center text-slate-400 hover:text-white transition-colors duration-300">
                <i class="fas fa-route mr-3 text-blue-400 group-hover:scale-110 transition-transform duration-300"></i>
                路由系统
              </a>
            </li>
            <li>
              <a href="#features"
                class="group flex items-center text-slate-400 hover:text-white transition-colors duration-300">
                <i
                  class="fas fa-mobile-alt mr-3 text-pink-400 group-hover:scale-110 transition-transform duration-300"></i>
                响应式设计
              </a>
            </li>
            <li>
              <a href="#features"
                class="group flex items-center text-slate-400 hover:text-white transition-colors duration-300">
                <i class="fas fa-moon mr-3 text-yellow-400 group-hover:scale-110 transition-transform duration-300"></i>
                主题切换
              </a>
            </li>
          </ul>
        </div>
      </div>

      <!-- 分割线和版权信息 -->
      <div class="mt-16 pt-8 border-t border-slate-700">
        <div class="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
          <p class="text-slate-400 text-center md:text-left">
            &copy; 2025 Vue3 快速开发架构 by 王麻子. 基于 MIT 许可证开源。
          </p>
          <div class="flex items-center space-x-6 text-sm text-slate-400">
            <a href="#" class="hover:text-white transition-colors duration-300">隐私政策</a>
            <a href="#" class="hover:text-white transition-colors duration-300">使用条款</a>
            <a href="#" class="hover:text-white transition-colors duration-300">联系我们</a>
          </div>
        </div>
      </div>
    </div>

    <!-- 回到顶部按钮 -->
    <button @click="scrollToTop"
      class="fixed bottom-8 right-8 w-14 h-14 bg-gradient-to-r from-cyan-500 to-blue-600 text-white rounded-full shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 z-50 group"
      :class="{ 'opacity-100 translate-y-0': showBackToTop, 'opacity-0 translate-y-16': !showBackToTop }">
      <i class="fas fa-arrow-up group-hover:animate-bounce"></i>
    </button>
  </footer>


</template>

<script setup lang="ts">
import { onMounted, onUnmounted, ref } from 'vue'
import { useAppStore } from '@/stores/app'
import { useUserStore } from '@/stores/user'

const appStore = useAppStore()
const userStore = useUserStore()

// 响应式数据
const isScrolled = ref(false)
const showBackToTop = ref(false)
const isScrolling = ref(false)
const activeSection = ref('hero')
const scrollProgress = ref(0)
const stats = ref({
  version: 'v1.0.0',
  features: 20,
  components: 50
})

// 滚动到顶部（增强版滑动动画）
const scrollToTop = () => {
  const startPosition = window.pageYOffset
  const duration = Math.min(startPosition / 3, 800) // 动态持续时间，最大0.8秒
  let start: number | null = null

  // 缓动函数 - easeOutQuart
  const easeOutQuart = (t: number): number => {
    return 1 - (--t) * t * t * t
  }

  const animateScroll = (timestamp: number) => {
    if (!start) start = timestamp
    const progress = Math.min((timestamp - start) / duration, 1)
    const ease = easeOutQuart(progress)

    window.scrollTo(0, startPosition * (1 - ease))

    if (progress < 1) {
      requestAnimationFrame(animateScroll)
    }
  }

  requestAnimationFrame(animateScroll)
}

// 平滑滚动到指定元素（增强版滑动动画）
const scrollToSection = (sectionId: string) => {
  const element = document.getElementById(sectionId)
  if (element) {
    isScrolling.value = true
    activeSection.value = sectionId

    const targetPosition = element.offsetTop - 80 // 考虑固定导航栏高度
    const startPosition = window.pageYOffset
    const distance = targetPosition - startPosition
    const duration = Math.min(Math.abs(distance) / 2, 1000) // 动态持续时间，最大1秒
    let start: number | null = null

    // 缓动函数 - easeInOutCubic
    const easeInOutCubic = (t: number): number => {
      return t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1
    }

    const animateScroll = (timestamp: number) => {
      if (!start) start = timestamp
      const progress = Math.min((timestamp - start) / duration, 1)
      const ease = easeInOutCubic(progress)

      window.scrollTo(0, startPosition + distance * ease)

      if (progress < 1) {
        requestAnimationFrame(animateScroll)
      } else {
        isScrolling.value = false
      }
    }

    requestAnimationFrame(animateScroll)
  }
}

// 处理滚动事件
const handleScroll = () => {
  const scrollTop = window.pageYOffset || document.documentElement.scrollTop
  const documentHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight

  isScrolled.value = scrollTop > 50
  showBackToTop.value = scrollTop > 300
  scrollProgress.value = Math.min((scrollTop / documentHeight) * 100, 100)

  // 更新当前活跃区域（仅在非程序化滚动时）
  if (!isScrolling.value) {
    const sections = ['hero', 'tech-stack', 'features', 'quick-start', 'about-author']
    const currentSection = sections.find(sectionId => {
      const element = document.getElementById(sectionId)
      if (element) {
        const rect = element.getBoundingClientRect()
        return rect.top <= 100 && rect.bottom >= 100
      }
      return false
    })

    if (currentSection) {
      activeSection.value = currentSection
    }
  }
}

/**
 * 组件挂载时初始化
 */
onMounted(() => {
  // 初始化应用状态
  appStore.initializeApp()

  // 添加滚动监听
  window.addEventListener('scroll', handleScroll)

  // 添加窗口大小变化监听
  window.addEventListener('resize', appStore.handleResize)

  // 添加动画观察器
  const observerOptions = {
    threshold: 0.1,
    rootMargin: '0px 0px -50px 0px'
  }

  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add('animate-in')
      }
    })
  }, observerOptions)

  // 观察所有需要动画的元素
  document.querySelectorAll('.animate-fade-in-up').forEach(el => {
    observer.observe(el)
  })
})

// 清理事件监听器
onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll)
  window.removeEventListener('resize', appStore.handleResize)
})
</script>

<style scoped>
/* 动画定义 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes blob {
  0% {
    transform: translate(0px, 0px) scale(1);
  }

  33% {
    transform: translate(30px, -50px) scale(1.1);
  }

  66% {
    transform: translate(-20px, 20px) scale(0.9);
  }

  100% {
    transform: translate(0px, 0px) scale(1);
  }
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-20px);
  }
}

@keyframes bounce {

  0%,
  20%,
  53%,
  80%,
  100% {
    transform: translateY(0);
  }

  40%,
  43% {
    transform: translateY(-30px);
  }

  70% {
    transform: translateY(-15px);
  }

  90% {
    transform: translateY(-4px);
  }
}

@keyframes pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }
}

@keyframes ping {

  75%,
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

/* 动画类 */
.animate-fade-in-up {
  animation: fadeInUp 0.6s ease-out forwards;
}

.animate-blob {
  animation: blob 7s infinite;
}

.animate-float {
  animation: float 6s ease-in-out infinite;
}

.animate-bounce {
  animation: bounce 1s infinite;
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.animate-ping {
  animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

/* 动画延迟 */
.animation-delay-200 {
  animation-delay: 200ms;
}

.animation-delay-400 {
  animation-delay: 400ms;
}

.animation-delay-600 {
  animation-delay: 600ms;
}

.animation-delay-800 {
  animation-delay: 800ms;
}

.animation-delay-1000 {
  animation-delay: 1000ms;
}

.animation-delay-1200 {
  animation-delay: 1200ms;
}

.animation-delay-2000 {
  animation-delay: 2000ms;
}

.animation-delay-4000 {
  animation-delay: 4000ms;
}

/* 导航栏滚动效果 */
.navbar {
  transition: all 0.3s ease;
}

.navbar.scrolled {
  backdrop-filter: blur(20px);
  background-color: rgba(255, 255, 255, 0.8);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.dark .navbar.scrolled {
  background-color: rgba(15, 23, 42, 0.8);
}

/* 自定义滚动条 */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

.dark ::-webkit-scrollbar-track {
  background: #1e293b;
}

.dark ::-webkit-scrollbar-thumb {
  background: #475569;
}

.dark ::-webkit-scrollbar-thumb:hover {
  background: #64748b;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .animate-fade-in-up {
    animation-delay: 0ms;
  }

  .animation-delay-200,
  .animation-delay-400,
  .animation-delay-600,
  .animation-delay-800,
  .animation-delay-1000,
  .animation-delay-1200 {
    animation-delay: 0ms;
  }
}

/* 打字机效果 */
.typewriter {
  overflow: hidden;
  border-right: 2px solid #06b6d4;
  white-space: nowrap;
  animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
}

@keyframes typing {
  from {
    width: 0;
  }

  to {
    width: 100%;
  }
}

@keyframes blink-caret {

  from,
  to {
    border-color: transparent;
  }

  50% {
    border-color: #06b6d4;
  }
}

/* 悬停效果增强 */
.group:hover .group-hover\:scale-110 {
  transform: scale(1.1);
}

.group:hover .group-hover\:rotate-6 {
  transform: rotate(6deg);
}

.group:hover .group-hover\:rotate-12 {
  transform: rotate(12deg);
}

.group:hover .group-hover\:translate-x-1 {
  transform: translateX(0.25rem);
}

/* 渐变文字效果 */
.gradient-text {
  background: linear-gradient(135deg, #06b6d4, #3b82f6, #8b5cf6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* 玻璃态效果 */
.glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.dark .glass {
  background: rgba(15, 23, 42, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
</style>
